/*
    相机控件OrbitControls
    旋转：拖动鼠标左键
    缩放：滚动鼠标中键
    平移：拖动鼠标右键

    本质：改变相机的位置变化


    requestAnimationFrame
    requestAnimationFrame的功能就是调用函数周期性的执行
    requestAnimationFrame 能够根据显示器的实际刷新率来调整动画的帧率，这有助于节省CPU资源并提高性能
    当页面不在前台或标签页不可见时，requestAnimationFrame 会自动暂停，这有助于减少电池消耗。

    const controls = THREE.AxesHelper()轨道控制器
    three.js坐标轴颜色红R、绿G、蓝B分别对应坐标系的x、y、z轴，对于three.js的3D坐标系默认y轴朝上。

    添加阻尼感
    controls.enableDamping = true;
    controls.update()
*/


import *  as THREE from 'three'

//导入轨道控制器
import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls'

//1.创建场景
const scene = new THREE.Scene()

//2.创建相机 (透视相机)
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

//设置相机位置
camera.position.set(0, 0, 10);
scene.add(camera);

//添加物体
//创建几何体
const cubeGeometry = new THREE.BoxGeometry(1,1,1);
const cubeMaterial = new THREE.MeshBasicMaterial({color: 0xffff00});
//根据几何体和材质创建物体
const cube = new THREE.Mesh(cubeGeometry,cubeMaterial);
scene.add(cube);

//初始化渲染器
const renderer = new THREE.WebGLRenderer();
//设置渲染器大小
renderer.setSize(window.innerWidth, window.innerHeight);

//将webgl渲染的canvas内容添加到body
document.body.appendChild(renderer.domElement)

//使用渲染器，通过相机将场景渲染进来
renderer.render(scene, camera);

//添加坐标辅助器
const axesHelper = new AxesHelper(150)
scene.add(axesHelper)

//创建轨道控制器
const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;

function render(){
  controls.update()
  renderer.render(scene,camera)
  //调用下一帧的时候就会调用render渲染
  requestAnimationFrame(render)
}

render();